"use client"

import React from 'react';
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ResponsiveContainer
} from 'recharts';

// 模拟数据 - 实际应用中应从API获取
const yearlyData = [
  { year: '2018', 送电: 180, 断电: 160 },
  { year: '2019', 送电: 200, 断电: 180 },
  { year: '2020', 送电: 220, 断电: 200 },
  { year: '2021', 送电: 250, 断电: 230 },
  { year: '2022', 送电: 280, 断电: 260 },
  { year: '2023', 送电: 320, 断电: 290 },
  { year: '2024', 送电: 240, 断电: 220, current: true },
];

interface YearlyTicketsTrendProps {
  className?: string;
}

export function YearlyTicketsTrend({ className }: YearlyTicketsTrendProps) {
  return (
    <div className={`w-full h-full min-h-[300px] ${className}`}>
      <ResponsiveContainer width="100%" height="100%">
        <LineChart
          data={yearlyData}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="year" />
          <YAxis />
          <Tooltip 
            formatter={(value, name) => [`${value} 张`, name]}
            labelFormatter={(label) => `${label}年度统计`}
          />
          <Legend />
          <Line 
            type="monotone" 
            dataKey="送电" 
            stroke="#0062D6" 
            name="送电操作票"
            strokeWidth={2}
            dot={{ r: 4 }}
            activeDot={{ r: 6 }}
          />
          <Line 
            type="monotone" 
            dataKey="断电" 
            stroke="#EF4444" 
            name="断电操作票"
            strokeWidth={2}
            dot={{ r: 4 }}
            activeDot={{ r: 6 }}
          />
        </LineChart>
      </ResponsiveContainer>
    </div>
  );
}

export default YearlyTicketsTrend; 